<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <title>信息编辑</title>
    <div th:replace="~{fragments/head-base}"></div>
    <link type="text/css" rel="stylesheet" th:href="@{/plugins/jasny-bootstrap/css/jasny-bootstrap.min.css}"/>
    <link type="text/css" rel="stylesheet" th:href="@{/css/pages/gallery.css}"/>
</head>
<body class="body sidebar-left-hidden fixedNav_position fixedMenu_left ">
<div class="preloader" style=" position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100000;
  backface-visibility: hidden;
  background: #ffffff;">
    <div class="preloader_img" style="width: 200px;
  height: 200px;
  position: absolute;
  left: 48%;
  top: 48%;
  background-position: center;
z-index: 999999">
        <img th:src="@{/img/loader.gif}" style=" width: 50px;" alt="loading...">
    </div>
</div>
<!--wrap-->
<div id="wrap">
    <div th:replace="~{fragments/top :: top}"></div>
    <!-- /#top -->
    <div class="wrapper fixedNav_top">
        <div th:replace="~{fragments/left :: left}"></div>
        <!-- /#left -->
        <div id="content" class="bg-container">
            <header class="head">
                <div class="main-bar">
                    <div class="row no-gutters">
                        <div class="col-6">
                            <h4 class="m-t-5">
                                <i class="fa fa-cog mr-1"></i>信息编辑
                            </h4>
                        </div>
                    </div>
                </div>
            </header>
            <div class="outer">
                <div class="inner bg-container">

                    <div class="card">
                        <ul id="clothing-nav" class="nav nav-tabs" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" href="#base" id="base-tab" role="tab" data-toggle="tab" aria-controls="base" aria-expanded="false">基本信息</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link " href="#security" role="tab" id="security-tab" data-toggle="tab" aria-controls="security" aria-expanded="true">账号安全</a>
                            </li>
                        </ul>
                        <div class="card-block">
                            <div id="clothing-nav-content" class="tab-content">
                                <div role="tabpanel" class="tab-pane fade active show " id="base" aria-labelledby="base-tab" aria-expanded="false">
                                    <form class="form-horizontal login_validator" id="baseForm">

                                        <input type="hidden" name="id"  th:value="${user.id}"/>
                                        <div class="row">
                                            <div class="col-xl-12">
                                                <div class="form-group row m-t-15">
                                                    <div class="col-12 col-lg-3 text-center text-lg-right">
                                                        <label class="col-form-label">个人头像&nbsp;&nbsp;</label>
                                                    </div>
                                                    <div class="col-12 col-lg-6 text-center text-lg-left">
                                                        <div class="fileinput fileinput-new" data-provides="fileinput">
                                                            <div class="fileinput-new img-thumbnail text-center">
                                                                <img width="100%" height="100%" th:src="${user.avatar}"  alt="not found" /></div>
                                                            <div class="fileinput-preview fileinput-exists img-thumbnail"></div>
                                                            <div class="m-t-20 text-center">
                                                            <span class="btn btn-primary btn-file">
                                                                <span class="fileinput-new"><i
                                                                        class="fa fa-upload mr-1"></i>上传头像</span>
                                                                <span class="fileinput-exists"><i
                                                                        class="fa fa-refresh mr-1"></i>更换</span>
                                                                <input type="file" id="file" name="file"/>
                                                            </span>
                                                                <a href="#" id="clearFile"
                                                                   class="btn btn-warning fileinput-exists"
                                                                   data-dismiss="fileinput"><i
                                                                        class="fa fa-remove mr-1"></i>移除</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group row m-t-25">
                                                    <div class="col-12 col-lg-3 text-lg-right">
                                                        <label for="username"
                                                               class="col-form-label">账号<span
                                                                style="color: red">*</span></label>
                                                    </div>
                                                    <div class="col-12 col-xl-6 col-lg-8">
                                                        <div class="input-group">
                                                        <span class="input-group-addon"> <i
                                                                class="fa fa-user text-primary"></i>
                                                         </span>
                                                            <input type="text" th:value="${user.username}"
                                                                   id="username" readonly="readonly" name="username"
                                                                   class="form-control">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group row m-t-25">
                                                    <div class="col-12 col-lg-3 text-lg-right">
                                                        <label for="name" class="col-form-label">昵称<span
                                                                style="color: red">*</span></label>
                                                    </div>
                                                    <div class="col-12 col-xl-6 col-lg-8">
                                                        <div class="input-group">
                                                        <span class="input-group-addon"> <i
                                                                class="fa fa-user text-primary"></i>
                                                         </span>
                                                            <input type="text" th:value="${user.name}" name="name"
                                                                   class="form-control" id="name">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <div class="col-12 col-lg-3 text-lg-right">
                                                        <label for="school" class="col-form-label">学校&nbsp;&nbsp;</span>
                                                        </label>
                                                    </div>
                                                    <div class="col-12 col-xl-6 col-lg-8">
                                                        <div class="input-group">
                                                    <span class="input-group-addon"><i
                                                            class="fa fa-mortar-board text-primary"></i></span>
                                                            <input type="text" id="school"
                                                                   name="school" th:value="${user.school}"
                                                                   class="form-control">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <div class="col-12 col-lg-3 text-lg-right">
                                                        <label for="phone" class="col-form-label">手机&nbsp;&nbsp;</label>
                                                    </div>
                                                    <div class="col-12 col-xl-6 col-lg-8">
                                                        <div class="input-group">
                                                    <span class="input-group-addon"><i
                                                            class="fa fa-phone text-primary"></i></span>
                                                            <input type="text" id="phone" name="phone"
                                                                   class="form-control"
                                                                   th:value="${user.phone}">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group gender_message row">
                                                    <div class="col-12 col-lg-3 text-lg-right">
                                                        <label class="col-form-label">性别<span
                                                                style="color: red">*</span></label>
                                                    </div>
                                                    <div class="col-12 col-xl-6 col-lg-8">
                                                        <div class="custom-controls-stacked">
                                                            <label class="custom-control  custom-radio">
                                                                <input id="radio1" type="radio" name="sex" value="男"
                                                                       th:if="${user.sex == '男'}"
                                                                       checked
                                                                       class="custom-control-input">
                                                                <input id="radio1" type="radio" name="sex" value="男"
                                                                       th:if="${user.sex != '男'}"
                                                                       class="custom-control-input">
                                                                <span class="custom-control-indicator"></span>
                                                                <span class="custom-control-description">汉子</span>
                                                            </label>
                                                            <label class="custom-control  custom-radio">
                                                                <input id="radio2" type="radio" name="sex" value="女"
                                                                       th:if="${user.sex == '女'}"
                                                                       checked
                                                                       class="custom-control-input">
                                                                <input id="radio2" type="radio" name="sex" value="女"
                                                                       th:if="${user.sex != '女'}"
                                                                       class="custom-control-input">

                                                                <span class="custom-control-indicator"></span>
                                                                <span class="custom-control-description">妹子</span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <div class="col-12 col-lg-3 text-lg-right">
                                                        <label class="col-form-label">签名&nbsp;&nbsp;</label>
                                                    </div>
                                                    <div class="col-12 col-xl-6 col-lg-8">
                                                        <div class="input-group">
                                                            <!--<span class="input-group-addon"><i class="fa fa-plus text-primary"></i></span>-->
                                                            <textarea maxlength="200" class="form-control" name="mood"
                                                                      style="height:120px">[[${user.mood}]]</textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <div class="col-12 col-lg-9 push-lg-3">
                                                        <button class="btn btn-primary" onclick="submitBase()"
                                                                type="button">
                                                            保存
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>

                                </div>
                                <div role="tabpanel" class="tab-pane fade " id="security" aria-labelledby="security-tab" aria-expanded="true">

                                    <form class="form-horizontal login_validator" id="securityForm">
                                        <input type="hidden" name="id"  th:value="${user.id}"/>
                                        <div class="row">
                                            <div class="col-xl-12">
                                                <div class="form-group row">
                                                    <div class="col-12 col-lg-3 text-lg-right">
                                                        <label for="email" class="col-form-label">邮箱<span style="color: red">*</span>
                                                        </label>
                                                    </div>
                                                    <div class="col-12 col-xl-6 col-lg-8">
                                                        <div class="input-group">
                                                    <span class="input-group-addon"><i
                                                            class="fa fa-envelope text-primary"></i></span>
                                                            <input type="text" th:value="${user.email}" id="email"
                                                                   name="email" class="form-control">
                                                        </div>
                                                    </div>
                                                </div>
                                                  <div class="form-group row">
                                                      <div class="col-12 col-lg-3 text-lg-right">
                                                          <label for="oldPassword" class="col-form-label">原密码<span style="color: red">*</span></label>
                                                      </div>
                                                      <div class="col-12 col-xl-6 col-lg-8">
                                                          <div class="input-group">
                                                      <span class="input-group-addon"><i
                                                              class="fa fa-lock text-primary"></i></span>
                                                              <input type="password" maxlength="20" name="oldPassword" id="oldPassword"
                                                                     class="form-control">
                                                          </div>
                                                      </div>
                                                  </div>
                                                <div class="form-group row">
                                                    <div class="col-12 col-lg-3 text-lg-right">
                                                        <label for="password" class="col-form-label">新密码<span style="color: red">*</span></label>
                                                    </div>
                                                    <div class="col-12 col-xl-6 col-lg-8">
                                                        <div class="input-group">
                                                      <span class="input-group-addon"><i
                                                              class="fa fa-lock text-primary"></i></span>
                                                            <input type="password" name="password" maxlength="20" id="password"
                                                                   class="form-control">
                                                        </div>
                                                    </div>
                                                </div>
                                                  <div class="form-group row">
                                                      <div class="col-12 col-lg-3 text-lg-right">
                                                          <label for="password2" class="col-form-label">再次输入<span style="color: red">*</span></label>
                                                      </div>
                                                      <div class="col-12 col-xl-6 col-lg-8">
                                                          <div class="input-group">
                                                      <span class="input-group-addon"><i
                                                              class="fa fa-lock text-primary"></i></span>
                                                              <input type="password"  maxlength="20" name="password2" id="password2"
                                                                     class="form-control">
                                                          </div>
                                                      </div>
                                                  </div>
                                                <div class="form-group row">
                                                    <div class="col-12 col-lg-9 push-lg-3">
                                                        <button class="btn btn-primary"  onclick="submitSecurity()" type="button">
                                                            保存
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
        <!-- /.inner -->
    </div>
    <!-- /.outer -->
    <!-- /#content -->
    <!-- Modal -->
    <div th:replace="~{fragments/modal}"></div>
    <!-- /#content -->
    <!-- # right side -->
</div>
<!-- /#wrap -->
<!-- global scripts-->
<div th:replace="~{fragments/footer :: footer}"></div>
<script type="text/javascript" th:src="@{/js/pages/profile.js}"></script>
<!--end of global scripts-->
<!--  plugin scripts -->
<script type="text/javascript" th:src="@{/js/pluginjs/jasny-bootstrap.js}"></script>
<!--end of plugin scripts-->
</body>
<script>

</script>


</html>
